<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-form :inline="true" ref="requestParameters">
          <div class="box">
            <div class="left">
              <el-form-item label="学科名称">
                <el-input
                  v-model="data.subjectName"
                  placeholder="请输入学科名称"
                />
              </el-form-item>
              <el-form-item>
                <el-button
                  size="small"
                  style="margin-left: 10px"
                  @click="deletee"
                  >清除</el-button
                >
                <el-button size="small" type="primary" @click="search"
                  >搜索</el-button
                >
              </el-form-item>
            </div>
            <div class="rigth">
              <el-form-item>
                <el-button
                  size="small"
                  type="success"
                  icon="el-icon-edit"
                  @click="showDialog = true"
                  >新增学科</el-button
                >
              </el-form-item>
            </div>
          </div>
        </el-form>
        <el-alert
          v-if="alertText !== ''"
          :title='alertText'
          type="info"
          class="alert"
          show-icon
          :closable="false"
        />

        <!-- 表格 :label="$t('table.id')"排序 -->
        <template> 
          <el-table :data="tableData" style="width: 100%; padding-top: 15px">
            <el-table-column prop="id" :label="$t('table.id')" type="index" align="center"/>
            <el-table-column prop="subjectName" align="center" label="学科名称"  />
            <el-table-column prop="username" align="center" label="创建者" />
            <el-table-column prop="addDate" align="center" label="创建日期">
              <template slot-scope="scope">
                <span>
                {{ scope.row.addDate | formatDate }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="isFrontDisplay" align="center" label="前台是否显示">
              <template #default="{ row }">
                {{ row.isFrontDisplay ? "是" : "否" }}
              </template>
            </el-table-column>
            <el-table-column prop="twoLevelDirectory" align="center" label="二级目录" />
            <el-table-column prop="tags" align="center" label="标签" />
            <el-table-column prop="totals" align="center" label="题目数量" />
            <el-table-column label="操作" align="center" width="220px">
              <template #default="{ row }">
                <el-button
                  size="mini"
                  type="text"
                  @click="
                    $router.push({
                      path: '/subjects/directorys',
                      query: {
                        id: row.id,
                        name: row.subjectName,
                      },
                    })
                  "
                  >学科目录</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  @click="
                    $router.push({
                      path: '/subjects/tags',
                      query: {
                        id: row.id,
                        name: row.subjectName,
                      },
                    })
                  "
                  >学科标签</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  @click="altertSubject(row.id)"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  @click="deleteSubject(row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-row type="flex" justify="end" style="margin-top:20px">
            <PageTool
              :total="page.total"
              :paginationPage="page.page"
              :paginationPagesize="page.pagesize"
              @pageChange="handleCurrentChange"
              @pageSizeChange="handleSizeChange"
            />
          </el-row>
        </template>
      </el-card>
      <SubjectsAdd
        ref="dialog"
        :visible.sync="showDialog"
        @addSuccess="addSuccess"
      />
    </div>
  </div>
</template>

<script>
import { list, remove } from "@/api/hmmm/subjects";
import PageTool from "./../components/page-tool";
import SubjectsAdd from "../components/subjects-add.vue";
export default {
  components: {
    PageTool,
    SubjectsAdd,
  },
  data() {
    return {
      page: {
        page: 1, // 当前页
        pagesize: 10, // 页面数据大小
        total: null, // 总页数
      },
      data: {
        id: null,
        subjectName: null,
        state: null,
      },
      alertText: "",
      listLoading: true,
      tableData: [],
      showDialog: false, // 显示隐藏弹层
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      const data = await list(this.page);
      console.log(data);
      this.tableData = data.data.items;
      this.page.total = data.data.counts;
      this.alertText = `数据共 ${this.page.total} 条记录`;
    },
    // 清除
    deletee() {
      this.data = {
        subjectName: null,
        state: null,
      };
      this.page = {
        page: 1,
        pagesize: 10,
        counts: 0,
      };
    },
    // 搜索
    search() {
      this.page.subjectName = this.data.subjectName;
      this.page.total = this.data.total;
      this.getList();
    },
    // 每页显示信息条数
    handleSizeChange(val) {
      this.page.pagesize = val;
      this.getList(this.page);
    },
    handleCurrentChange(val) {
       this.page.page = val;
      this.getList(this.page);
    },
    // 添加学科成功
    addSuccess(type) {
      if (type === "add") {
        this.page.page = 1;
      }
      this.getList();
    },
    // 修改学科
    altertSubject(id) {
      this.showDialog = true;
      this.$refs.dialog.getSubjectDetail(id);
    },
    // 删除学科
    async deleteSubject(id) {
      try {
        await this.$confirm("此操作将永久删除该学科, 是否继续?", {
          title: "提示",
          type: "warning",
        });
        await remove({ id });
        await this.$message.success("删除成功");
        if (this.tableData.length === 1 && this.page.page !== 1) {
          this.page.page--;
        }
        this.getList();
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

<style>
.box {
  display: flex;
  justify-content: space-between;
}
</style>
